/*
 Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
*/

@use '../../internal/styles' as styles;
@use '../../internal/styles/tokens' as awsui;
@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;

.placeholder {
  @include styles.form-placeholder;
}

$checkbox-size: awsui.$size-control;
$inlineLabel-border-radius: 2px;

.item {
  display: flex;
  align-items: center;

  > .checkbox {
    position: relative;
    min-block-size: $checkbox-size;
    min-inline-size: $checkbox-size;
    block-size: $checkbox-size;
    inline-size: $checkbox-size;
    margin-inline-end: styles.$control-padding-horizontal;
  }
}

.option-group {
  // Mirrors the negative margin styling of the selectable item.
  &:not(:first-child) {
    margin-block-start: calc(-1 * #{awsui.$border-item-width});
  }
}

.filter {
  z-index: 4;

  // Prevents the input container from shrinking below its minimum size
  // See AWSUI-12019
  flex-shrink: 0;
}

.trigger {
  @include styles.text-overflow-ellipsis;
}

.layout-strut {
  inline-size: 100%;
  position: relative;
  // Prevent incorrect layer ordering in Safari by making sure
  // this element is also offloaded to the GPU along with the virtual items
  transform: translate3d(0, 0, 0);
}

.list-bottom {
  /* used in unit-tests */
}

.selected-icon {
  color: awsui.$color-item-selected;
  padding-inline-start: awsui.$space-xs;
}

.show-label-tag > .selected-icon {
  padding-inline-start: awsui.$space-scaled-s;
}

.inline-token-trigger {
  display: flex;
  flex-wrap: nowrap;
  column-gap: awsui.$space-xxs;
  inline-size: 100%;
}

.inline-token-list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: awsui.$space-xxs;
  inline-size: 100%;
  overflow-x: hidden;

  // Fade out any overflow tokens
  mask-image: linear-gradient(270deg, transparent, white 20px, white);

  @include styles.with-direction('rtl') {
    mask-image: linear-gradient(-270deg, transparent, white 20px, white);
  }
}

.inline-token-hidden-placeholder {
  @include styles.awsui-util-hide;
}

.inline-token-counter {
  white-space: nowrap;
}

.inline-label-trigger-wrapper {
  margin-block-start: -7px;
}

.inline-label-wrapper {
  margin-block-start: calc(awsui.$space-scaled-xs * -1);
}

.inline-label {
  background: linear-gradient(to bottom, awsui.$color-background-layout-main, awsui.$color-background-input-default);
  border-start-start-radius: $inlineLabel-border-radius;
  border-start-end-radius: $inlineLabel-border-radius;
  border-end-start-radius: $inlineLabel-border-radius;
  border-end-end-radius: $inlineLabel-border-radius;
  box-sizing: border-box;
  display: inline-block;
  color: awsui.$color-text-form-label;
  font-weight: awsui.$font-display-label-weight;
  font-size: awsui.$font-size-body-s;
  line-height: 14px;
  letter-spacing: awsui.$letter-spacing-body-s;
  position: relative;
  inset-inline-start: calc(awsui.$border-width-field + awsui.$space-field-horizontal - awsui.$space-scaled-xxs);
  margin-block-start: awsui.$space-scaled-xs;
  padding-block-end: 2px;
  padding-inline: awsui.$space-scaled-xxs;
  max-inline-size: calc(100% - (2 * awsui.$space-field-horizontal));
  z-index: 1;
  &-disabled {
    background: linear-gradient(to bottom, awsui.$color-background-layout-main, awsui.$color-background-input-disabled);
  }
}

// Specific Styling for Inline Label Text to not overlap with Inline Tokens
.inline-label-inline-tokens {
  padding-block-end: 0;
  transform: translateY(-1.5px);
}

.disabled-reason-tooltip {
  /* used in test-utils or tests */
}
